<template>
  <div class="list-item" v-if="Object.keys(product).lenght !== 0">
    <div class="check">
      <CheckButton @click.native="handleChecked" :isChecked="product.isChecked" />
    </div>
    <div class="content clearfix">
      <div class="conten-img fl">
        <img :src="product.img" alt />
      </div>
      <div class="content-desc">
        <p class="title">{{product.title}}</p>
        <p class="desc">{{product.desc}}</p>
        <p class="price clearfix">
          <span class="fl p-count">{{product.price}}</span>
          <span class="fr count">{{'x'+product.count}}</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import CheckButton from "@/components/content/checkButton/CheckButton.vue";

export default {
  name: "cart-list-item",
  props: {
    product: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  components: {
    CheckButton
  },
  methods: {
    handleChecked() {
      this.product.isChecked = !this.product.isChecked;
    }
  }
};
</script>

<style scoped>
.list-item {
  width: 100%;
  padding: 10px 10px 8px 35px;
  overflow: hidden;
  position: relative;
  border-bottom: 5px solid #f2f2f2;
}
.check {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translate(0, -50%);
}
.conten-img {
  margin-right: 15px;
}
.conten-img img {
  width: 75px;
  height: 96px;
  border-radius: 3px;
}
.content-desc {
  display: flex;
  height: 94px;
  flex-direction: column;
}
.title,
.desc {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.title {
  font-size: 18px;
  color: #333;
}
.desc {
  flex: 1;
  line-height: 38px;
  font-size: 14px;
}
.p-count {
  font-size: 18px;
  color: var(--color-tint);
}
.count {
  font-size: 16px;
  color: #333;
}
</style>